import TodoItem from "./TodoItem";
import { useSelector } from 'react-redux'
const TodoMain = () => {
  const list = useSelector(state=> state.todos)
  console.log(list);
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {
          list.map(item=>(
            <TodoItem key={item.id} {...item} />
          ))
        }
      </ul>
    </section>
  );
};
export default TodoMain;
